<template>
	<view style=" min-height:100vh;background-color: white;padding: 20rpx;padding-bottom: 40rpx;">
		<fui-form labelSize="26rpx" ref="form" labelWidth="180">
			<fui-form-item :padding='["30rpx",0]' bottomBorder>
				<fui-input size="26" v-model="formData.title" :borderBottom="false" :padding="[0]"
					placeholder="请输入标题"></fui-input>
			</fui-form-item>

			<fui-form-item :padding='["30rpx",0]' bottomBorder label="封面图片:">
				<template v-slot:vertical>
					<view class="">
						<view style="width: 100%;">
							<fui-upload max="6" immediate :fileList="formData.uploadFiles" @delete=" imgDelete"
								:url="urlImg" ref="imgUpload" @success="imgSuccess" @error="error"
								@complete="complete"></fui-upload>
						</view>

					</view>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="添加规格:">
				<template v-slot:vertical>
					<view class="flex" style="padding: 10rpx 0rpx;flex-wrap: wrap;">
						<view class="guigeBox" v-for="(item,index) in formData.guigeList" :key="index"
							@click="clickGuige(item,index)">
							{{item.title}}
						</view>
						<view class="guigeBox" @click="plusGuige">
							<fui-icon name="plus" size="28"></fui-icon>
						</view>
					</view>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder>
				<template v-slot:vertical>
					<fui-textarea size="26" maxlength="-1" :padding="['32rpx','0rpx']" :border-bottom="false"
						:border-top="false" placeholder="请输入商品详细描述..." v-model="formData.descr"></fui-textarea>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx"," 0rpx","100rpx","0rpx"]' :bottomBorder="false" label="是否有转发奖励:">
				<fui-radio-group name="radio" @change="checked">
					<view class="fui-list__item flex">

						<view class="fui-align__center">
							<fui-radio color="#FFDD00" :value="0" :checked="formData.rewards==0"></fui-radio>
							<text class="fui-text">没有</text>
						</view>


						<view class="fui-align__center">
							<fui-radio color="#FFDD00" :value="1" :checked="formData.rewards==1"></fui-radio>
							<text class="fui-text">有</text>
						</view>

					</view>
				</fui-radio-group>

			</fui-form-item>
			<fui-form-item :padding='["30rpx"," 0rpx","100rpx","0rpx"]' :bottomBorder="false" label="转发奖励:"
				v-if="formData.rewards==1">
				<view class="flex" style="justify-content: space-between;">
					<view class="flex" style="width: 48%;">
						<fui-input size="26" :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/浏览</text></fui-input>
					</view>
					<view class="flex" style="width: 48%;">
						<fui-input size="26" :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/成交</text></fui-input>
					</view>
				</view>
			</fui-form-item>
		</fui-form>
		<view class="saveBtns">
			<view style="width: 90vw; display: inline-block;">
				<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交发布</fui-button>
			</view>
		</view>
		<fui-bottom-popup :show="show" @close="closePopup" :maskClosable="false">
			<view class="fui-popup__container">
				<text class="fui-title">{{isEdit?'编辑规格':'添加规格'}}</text>
				<view class="fui-btn__box">
					<fui-form labelSize="26rpx" ref="guigeForm" labelWidth="180">
						<fui-form-item asterisk bottomBorder label="规格名:">
							<fui-input size="26" v-model="guigMsg.title" :borderBottom="false" :padding="[0]"
								placeholder="请输入规格名"></fui-input>
						</fui-form-item>
						<fui-form-item asterisk bottomBorder label="原价:">
							<fui-input type="number" size="26" v-model="guigMsg.oldPrice" :borderBottom="false"
								:padding="[0]" placeholder="请输入原价"></fui-input>
						</fui-form-item>
						<fui-form-item asterisk bottomBorder label="促销价:">
							<fui-input type="number" size="26" v-model="guigMsg.newPrice" :borderBottom="false"
								:padding="[0]" placeholder="请输入促销价"></fui-input>
						</fui-form-item>
						<fui-form-item asterisk bottomBorder label="销售限量:">
							<fui-input type="number" size="26" v-model="guigMsg.limited" :borderBottom="false"
								:padding="[0]" placeholder="请输入销售限量"></fui-input>
						</fui-form-item>
						<fui-form-item asterisk bottomBorder label="每人限购:">
							<fui-input type="number" size="26" v-model="guigMsg.bought" :borderBottom="false"
								:padding="[0]" placeholder="请输入每人限购"></fui-input>
						</fui-form-item>
					</fui-form>
					<view class="" style="padding-top: 20rpx;">
						<view class="flex" style="width: 100%;justify-content: space-around;" v-if="isEdit">
							<fui-button btnSize="small" text="修改" type="primary" @click="editGuige"></fui-button>
							<fui-button btnSize="small" text="删除" type="warning" @click="delGuige"></fui-button>
						</view>
						<view class="flex" style="width: 100%;justify-content: center;" v-else>
							<fui-button btnSize="small" text="添加" type="success" @click="addGuige"></fui-button>
						</view>

					</view>
				</view>
				<view class="fui-icon__close" @tap="closePopup">
					<fui-icon name="close" :size="48"></fui-icon>
				</view>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					guigeList: [],
					title: '',
					formOrder: 'goods',
					rewards: 0, //是否有转发奖励
					bargain: 0, //成交
					browse: 0, //浏览
					uploadFiles: [],
					descr: '',
				},
				guigeIndex: null,
				isEdit: false,
				guigMsg: {
					name: '',
					oldPrice: null,
					newPrice: null,
					limited: null,
					bought: null,
				},
				guigeForm: null,
				show: false,
				//上传接口地址


				urlImg: 'https://api.zhanfang.comdns.cn/uniapp/common/Upload/upload?file=uniapp&type=image',
				urlVideo: 'https://api.zhanfang.comdns.cn/uniapp/common/Upload/upload?file=uniapp&type=video',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				imgUrls: [],
				videoUrls: [],
				form: null,
				imgUpload: null,
				videoUpload: null,
			};
		},
		methods: {
			submitOrder() {
				console.log('表单', this.formData);


				if (!this.formData.title) {
					this.$common.showToast("请输入招聘标题");
					return
				}

				if (this.formData.uploadFiles.length == 0) {
					this.$common.showToast("请上传商品封面图片");
					return
				}
				if (this.formData.guigeList.length == 0) {
					this.$common.showToast("至少有一种规格");
					return
				}
				if (!this.formData.descr) {
					this.$common.showToast("请输入招聘详细描述");
					return
				}


				this.$httpost('/Form/submitOrder', this.formData).then(res => {
					this.$common.showToast("商品发布成功");
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				})
			},
			// 删除规格
			delGuige() {
				this.formData.guigeList.splice(this.guigeIndex, 1)
				this.closePopup()
			},
			// 修改规格
			editGuige() {
				if (!this.guigMsg.title) {
					this.$common.showToast("规格名称不能为空");
					return
				}
				if (!this.guigMsg.oldPrice) {
					this.$common.showToast("请输入原价");
					return
				}
				if (!this.guigMsg.newPrice) {
					this.$common.showToast("请输入促销价");
					return
				}
				if (this.guigMsg.newPrice > this.guigMsg.oldPrice) {
					this.$common.showToast("促销价不能大于原价");
					return
				}
				if (!this.guigMsg.limited) {
					this.$common.showToast("请输入限售销量");
					return
				}
				if (!this.guigMsg.bought) {
					this.$common.showToast("请输入每人限购");
					return
				}
				this.formData.guigeList[this.guigeIndex] = this.guigMsg
				this.closePopup()
			},
			// 点击的那个规格
			clickGuige(item, index) {
				this.isEdit = true
				this.show = true
				this.guigMsg = Object.assign({}, item)
				this.guigeIndex = index
			},
			// 添加规格
			addGuige() {
				if (!this.guigMsg.title) {
					this.$common.showToast("规格名称不能为空");
					return
				}
				if (!this.guigMsg.oldPrice) {
					this.$common.showToast("请输入原价");
					return
				}
				if (!this.guigMsg.newPrice) {
					this.$common.showToast("请输入促销价");
					return
				}
				if (this.guigMsg.newPrice > this.guigMsg.oldPrice) {
					this.$common.showToast("促销价不能大于原价");
					return
				}
				if (!this.guigMsg.limited) {
					this.$common.showToast("请输入限售销量");
					return
				}
				if (!this.guigMsg.bought) {
					this.$common.showToast("请输入每人限购");
					return
				}
				this.formData.guigeList.push(this.guigMsg)
				this.guigMsg = {
					title: '',
					oldPrice: null,
					newPrice: null,
					limited: null,
					bought: null,
				}
			},
			// 数据初始化
			closePopup() {
				this.guigeIndex = null
				this.show = false
				this.isEdit = false
				this.guigMsg = {
					title: '',
					oldPrice: null,
					newPrice: null,
					limited: null,
					bought: null,
				}
			},
			plusGuige() {
				this.show = true
			},
			//图片
			imgSuccess(e) {
				console.log(e)
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				if (res.data.url) {
					this.formData.uploadFiles.push(res.data.url)
				}
			},
			//选择视频或上传完成时触发
			imgDelete(e) {
				this.formData.uploadFiles.splice(e.index, 1)
			},
			//上传失败时触发
			error(e) {
				this.status = e.status
				uni.showToast({
					title: '上传失败，请检查网络',
					icon: 'fail',
					duration: 2000
				});
			},
			//选择视频或上传完成时触发
			complete(e) {
				this.status = e.status
			},
			checked(e) {
				this.formData.rewards = e.detail.value

			},

		}
	}
</script>

<style lang="scss" scoped>
	.fui-align__center {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.saveBtns {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.fui-popup__container {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
	}

	.fui-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.fui-sub__title {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		text-align: center;
		font-size: 24rpx;
		color: #7F7F7F;
		transform: scale(.9);
	}

	.fui-descr {
		font-weight: bold;
		padding-top: 64rpx;
	}

	.fui-sub__descr {
		font-size: 26rpx;
		color: #B2B2B2;
		padding: 32rpx 0;
	}

	.fui-btn__box {

		padding: 32rpx 0;
		box-sizing: border-box;
	}

	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		left: 24rpx;
	}

	.guigeBox {

		font-size: 28rpx;
		padding: 10rpx 20rpx;
		background-color: #FFDD00;
		border-radius: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	::v-deep .fui-uploadv__del-wrap {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-uploadv__item {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-upload__video {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	.uni-form-item {
		padding: 15px 0;
	}

	.title {
		margin-bottom: 10px;
	}

	.group-item {
		flex-direction: row;
		margin-right: 20px;
	}

	.btn {
		flex: 1;
	}

	.btn-submit {
		margin-right: 5px;
	}

	.btn-reset {
		margin-left: 5px;
	}

	.result {
		margin-top: 30px;
	}

	.formItem {
		background-color: white;
		padding: 20rpx;
	}

	.btnBox {
		margin-top: 20rpx;

	}
</style>